<template>
	<view class="content">

		<view class="bigbox">

			<view class="sousuo" @click="dj()">
				<img src="../../static/搜索(2).png" alt=""
					style="width: 20px; height: 20px; margin-top: 7px; margin-left: 10px;">
				<text class="text">请输入关键词进行搜索</text>
			</view>

		</view>

		<view class="">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" >
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<!-- <text style="color: #fff; font-size: 32px;">{{index+1}}</text> -->
							<img class="img" :src="item.img" alt="">
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view class="xz">

			<view class="box" @click="jjsh()">
				<img class="img" src="../../static/jjsh.png" alt="">
				<view class="">
					居家生活
				</view>
			</view>


			<view class="box" @click="sjsm()">
				<img class="img" src="../../static/sj.png" alt="">
				<view class="">
					手机数码
				</view>
			</view>

			<view class="box" @click="lqzc()">
				<img class="img" src="../../static/领劵.png" alt="" style="margin-left: 13px;">
				<view class="">
					领劵中心
				</view>
			</view>

			<view class="box" @click="hwyd()">
				<img class="img" src="../../static/运动.png" alt="">
				<view class="">
					户外运动
				</view>
			</view>
		</view>


		<view class="shangping-f">

			<view class="shangping" v-for="(item,index) in wp" @click="goDetail(index)">
				<img class="img" :src="item.mainPic" alt="">
				<view class="text">
					{{item.dtitle}}
				</view>
				<view class="rmb">
					¥{{item.actualPrice}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import gbroMarquee from '@/components/gbro-marquee/marquee.vue'
	export default {
		components: {},
		data() {
			return {
				num: 10,
				ee: [],
				wp: [],
				info: [],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'dot',
				dotsStyles: {
					backgroundColor: 'rgba(218, 182, 155, 0.3)',
					border: '1px rgba(218, 182, 155, 0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(87, 86, 85, 1.0)',
					selectedBorder: '1px rgba(87, 86, 85, 1.0) solid'
				},
			}
		},
		onLoad() {
			let that = this
			const value = uni.getStorageSync('id');
			if (value.length == 0) {
				uni.setStorageSync('id', this.ee);
			}

			uni.request({
					url: "https://cmscg.dataoke.com/cms-v2/ads?page=1&is_pc=1&siteId=96823",
					success(res) {
						// console.log(res)
						that.info = res.data.data.middle_banner
						console.log(res.data.data.middle_banner)
					},
				}),
				uni.request({
					url: "https://openapi.dataoke.com/api/goods/get-goods-list?version=v1.2.4&appKey=612bcfe884763&pageId=1&pageSize=100&sort=0&sign=195f438dc203278dde0ca425d6af807f",
					success(res) {
						console.log(res)
						that.wp = res.data.data.list
						that.wp = that.wp.slice(0, 10)
						console.log(res.data.data.list)
					},
				})
		},
		onReachBottom() {
			// 触底函数
			this.num=this.num+10
			uni.request({ //推荐商品
				url: "https://openapi.dataoke.com/api/goods/get-goods-list?",
				data: {
					version: "v1.2.4",
					pageId: 1,
					pageSize: this.num,
					sort: 0,
					appKey: "612bcfe884763",
					sign: '195f438dc203278dde0ca425d6af807f',
				},
				success: (res) => {
					this.wp = res.data.data.list
					// this.sp = this.sp.concat(res.data.data.list.slice(this.goodsnum - 8))

					// this.goodsnum = this.goodsnum + 8
					console.log(this.num)
					console.log(res.data.data);

				}
			})
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			},
			goDetail(index) {
				uni.navigateTo({
					url: './goumai?' + "id=" + this.wp[index].id
				});
			},
			dj() {
				uni.navigateTo({
					url: './sousuo'
				});
			},
			jjsh() {
				uni.navigateTo({
					// url: './goumai2?'+"id="+this.list[index].id
					url: './sousuo?' + "name=" + "居家生活"
				});
			},
			sjsm() {
				uni.navigateTo({
					// url: './goumai2?'+"id="+this.list[index].id
					url: './sousuo?' + "name=" + "手机数码"
				});
			},
			hwyd() {
				uni.navigateTo({
					// url: './goumai2?'+"id="+this.list[index].id
					url: './sousuo?' + "name=" + "户外运动"
				});
			},
			lqzc() {
				uni.navigateTo({
					// url: './goumai2?'+"id="+this.list[index].id
					url: './lqjx'
				});
			},

		}
	}
</script>

<style lang="scss">
	.shangping-f {
		display: flex;
		flex-wrap: wrap;
		// border: 1px solid red; 
		margin-top: 30px;
		background-color: #efefef;
	}

	.shangping {

		width: 180px;
		// border: 1px solid #707070;
		background-color: #ffffff;
		margin-top: 5px;
		margin-left: 4px;
		border-radius: 20px;
		margin-top: 6px;

		.img {
			width: 180px;
			border-radius: 20px;
		}

		.text {
			width: 180px;
			background-color: #ffffff;
		}

		.rmb {
			font-size: 25px;
			margin-left: 10px;
			color: #fa2209;
		}
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}

	.xz {
		display: flex;
		margin-top: 10px;
		width: 100%;

		.img {
			margin-top: 25%;
			margin-left: 10%;
			width: 50px;
		}

		.box {
			border-radius: 20px;
			width: 65px;
			height: 65px;
			background-color: #f4f4f4;
			margin-left: 23px;
			font-size: 15px;
			color: #707070;
		}
	}

	.bigbox {
		background-color: #f1f1f2;
		height: 60px;
		margin-top: 0px;
		align-items: center;
		display: flex;

		.sousuo {

			margin: 10px 10px 10px 10px;
			width: 95%;
			height: 35px;
			display: flex;
			background-color: #ffffff;
			border-radius: 13px;

			.text {
				margin-top: 5px;
				color: #b6b6b6;
				margin-left: 5px;
			}
		}
	}
</style>
